<template>
  <div class="checkbox">
    <label>
      <input 
        hidden
        :name="name"
        @change="$emit('change')"
        type="radio" />
        <div :class="{ radioActive : checked }" class="radio">
        </div><div class="label">{{label}}</div>
    </label>
  </div>
</template>

<script>
export default {
  props: {
    background: {
      type: String,
      default: '#607BFF'
    },
    checked: {
      type: Boolean,
      default: false
    },
    name: {
      type: String,
      default: 'name'
    },
    label: {
      type: String,
      default: ''
    }
  },
  components: {

  },
  methods: {

  },
  data () {
    return {

    }
  },
  created () {

  }
}
</script>

<style scoped lang="less">
.checkbox {
  display: inline-flex;
  width: 33.3%;
  justify-content: center;
  margin: 0.3em 0;
  align-items: center;
  label {
    display: inline-flex;
    justify-content: center;
    align-items: center; 
  }
  .radio {
    height: 0.83em;
    width: 0.83em;
    border-radius: 50%;
    border: 1px solid #979797;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
  }
  .label {
    display: inline;
    font-size: 1em;
    margin-left: 0.5em;
  }
}
.radioActive {
  border: 1px solid #607BFF !important;
  background: rgb(96, 123, 255);
}
</style>